<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
        <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
        <style type="text/css">
            body {
                background: #f0f0f0;
            }
            .bg-dark {
                background: #333333 !important;
            }
            .aui-slide-node img {
                width: auto;
                height: 100%;
            }
            .slideholder {
                overflow: hidden;
                position: relative;
                height: 110px
            }
            .blankholder {
                overflow: hidden;
                position: relative;
                height: 10px;
                background-color: #EEEEEE;
                border-top: 1px solid #e0e0e0;
                border-bottom: 1px solid #e0e0e0;
            }
            .top_icon {
                width: 60px;
                height: 60px;
                background: center;
            }
            .fast_icon {
                width: 40px;
                height: 40px;
                background: center;
            }
            .loan_list_text {
                white-space: nowrap;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id='slide' class='slideholder'></div>
        <div id='blank' class='blankholder'></div>
        <section class="aui-grid" style="background-color:#fafaff; padding-top:0.4rem; padding-bottom:0.3rem; margin:0rem">
            <div class="aui-row " style="padding:0rem; margin:0rem">
                <div class="aui-col-xs-4  aui-border-r" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrame()">
                    <img class="top_icon" src="../../image/main_frm_1/logo1.jpg"></img>
                    <div class="aui-grid-label" style="padding:0rem; margin:0rem">
                        贷款申请
                    </div>
                </div>
                <div class="aui-col-xs-4  aui-border-r" style="padding:0rem; margin:0rem" tapmode onclick="openLoanManagementFrame()">
                    <img class="top_icon" src="../../image/main_frm_1/logo2.jpg"></img>
                    <div class="aui-grid-label" style="padding:0rem; margin:0rem">
                        贷款管理
                    </div>
                </div>
                <div class="aui-col-xs-4 " style="padding:0rem; margin:0rem" tapmode onclick="openCreditInquiry()">
                    <img class="top_icon" src="../../image/main_frm_1/logo3.jpg"></img>
                    <div class="aui-grid-label" style="padding:0rem; margin:0rem">
                        征信查询
                    </div>
                </div>
            </div>
        </section>
        <div id='blank' class='blankholder'></div>
        <section class="aui-grid" style="background-color:#fafaff; padding-top:0.3rem; padding-bottom:0.1rem; margin:0rem">
            <div class="aui-row " style="padding:0rem; margin:0rem">
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(0)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_all.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        贷款大全
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(2)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_student.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        学生贷
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(3)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_employee.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        工薪贷
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(4)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_free.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        自由职业贷
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(5)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_company.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        企业贷
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(0)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_new.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        新品上架
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(1)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_fast.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        极速贷
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(7)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_house.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        抵押贷
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(8)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_taobao.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        淘宝贷
                    </div>
                </div>
                <div class="aui-col-5" style="padding:0rem; margin:0rem" tapmode onclick="openLoanListFrameIndex(9)">
                    <img class="fast_icon" src="../../image/main_frm_1/loan_creditcard.png"></img>
                    <div class="aui-grid-label" style="font-size:0.6rem; padding:0rem; margin:0rem; margin-bottom:0.1rem; ">
                        信用卡贷
                    </div>
                </div>
            </div>
        </section>
        <div id='blank' class='blankholder'></div>
        <div id="hotList" style="display:none" class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-media-list">
                <li class="aui-list-header">
                    热门贷款产品
                </li>
                <template id="loan_list">
                    <li class="aui-list-item" id="item_container" item_index="" tapmode onclick="openLoanDetail(this)">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media" style="width: 3.2rem;">
                                <img id="company_icon" style="border-radius: 10px;" src="">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div id="loan_name" class="aui-list-item-title">
                                        loan_name
                                    </div>
                                    <div id="loan_stat" class="aui-list-item-right">
                                        loan_stat
                                    </div>
                                </div>
                                <div id="loan_limit" class="aui-list-item-text aui-padded-t-10 loan_list_text" style="width: 10rem">
                                    贷款额度
                                </div>
                            </div>
                        </div>
                        <div>
                            <li class="aui-list-header"  style="background-color: #f0fbff;">
                                <img src="../../image/main_frm_1/coins.png" style="width: 0.6rem;" class="aui-img-round" />
                                <span id="loan_desc" class="aui-margin-l-5">loan_desc</span>
                            </li>
                        </div>
                    </li>
                    <li class="aui-list-header" style="padding: 0.2rem; background-color: #f0f0f0;"></li>
                </template>
                <div id="list_container"></div>
            </ul>
            <div style="padding: 0.5rem 1rem 0rem 1rem;">
                <div id="loadmore-tag" class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" tapmode onclick="openLoanListFrame()">
                    查看全部贷款产品
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js" ></script>
    <script type="text/javascript" src="../../script/aui-slide.js"></script>
    <script type="text/javascript" src="../../script/APICloud-rest-SHA1.js" ></script>
    <script type="text/javascript" src="../../script/aui-toast.js" ></script>
    <script type="text/javascript" src="../../script/aui-dialog.js" ></script>
    <script>
        var client = new Resource("A6928874653494", "4B6C428C-24C2-F9E7-3175-F983922E8C8F");
        var modelBannerPicsRecord = client.Factory("bannerPics");
        var toast = new auiToast();
        var dialog = new auiDialog();
        function loadLoanList() {
            var index_start = 0;
            var hotLength = 5;
            var loan_names = ["拍拍贷", "点融网", "你我贷", "中融投", "君融贷", "才米公社"];
            var loan_stats = [1.00, 1.13, 2.62, 0.78, 0.36, 0.72];
            var loan_limits = ["1万-5万", "1000-3000", "1万-2万", "5000-1万", "1万-3万", "1000-5000"];
            var loan_descs = ["10天快速放贷 仅需央行征信证明+身份证", "仅需身份证+芝麻信用，24小时快速放贷", '获政府认可金融平台 可投活期', '中国互联网金融协会常务理事单位', '永诚保险保障 注册再送100元微信红包', '花旗融资担保 资金独立保管'];
            var company_icons = ["paipai.jpg", "dianrong.jpg", "niwodai.jpg", "zhongrongtou.jpg", "junrongdai.jpg", "caimi.jpg"];
            var model = api.require('model');
            model.config({
                appId : 'A6928874653494',
                appKey : '4B6C428C-24C2-F9E7-3175-F983922E8C8F',
                host : 'https://d.apicloud.com'
            });
            toast.loading({
                title : "加载中",
                duration : 2000
            }, function(ret) {
                console.log(ret);
                setTimeout(function() {
                    toast.hide();
                }, 30000)
            });
            var query = api.require('query');
            var queryId = 0;
            var userId = "";
            query.createQuery(function(ret, err) {
                if (ret) {
                    queryId = ret.qid;
                    if (queryId) {
                        query.limit({
                            qid : queryId,
                            value : hotLength
                        });
                        /*
                         query.whereEqual({
                         qid : queryId,
                         column : 'username',
                         value : pwPhoneText
                         });
                         */
                        query.desc({
                            qid : queryId,
                            column : 'hotLevel'
                        });
                        model.findAll({
                            class : "loanItemRecord",
                            qid : queryId
                        }, function(ret, err) {
                            if (ret) {
                                //alert(JSON.stringify(ret));
                                toast.hide();
                                for (var i = index_start; i < ret.length; i++) {
                                    var template = document.querySelector('#loan_list');
                                    var clone = template.content.cloneNode(true);
                                    var icon = clone.querySelector('#company_icon');
                                    icon.src = ret[i].loanItemIconName;
                                    var loan_name = clone.querySelector('#loan_name');
                                    loan_name.textContent = ret[i].finInstName;
                                    var loan_stat = clone.querySelector('#loan_stat');
                                    if (ret[i].rateTypeIndex == 0) {
                                        loan_stat.textContent = '参考日利率: ' + ret[i].dayRate.toFixed(2) + '%';
                                    } else if (ret[i].rateTypeIndex == 1) {
                                        loan_stat.textContent = '参考月利率: ' + ret[i].monthRate.toFixed(2) + '%';
                                    } else {
                                        loan_stat.textContent = '参考年利率: ' + ret[i].yearRate.toFixed(2) + '%';
                                    }
                                    var loan_limit = clone.querySelector('#loan_limit');
                                    loan_limit.textContent = '可贷款额度: ' + ret[i].loanFloorLimit + '-' + ret[i].loanUpperLimit + '元';
                                    var loan_desc = clone.querySelector('#loan_desc');
                                    loan_desc.innerHTML = ret[i].loanItemDescription;
                                    var item_container = clone.querySelector('#item_container');
                                    item_container.item_index = ret[i].id;
                                    var list_container = document.querySelector('#list_container');
                                    list_container.appendChild(clone);
                                }
                                var hotList = document.querySelector('#hotList');
                                hotList.style.display = "block";
                            } else {
                                alert(JSON.stringify(err));
                            }
                        });
                    }
                } else {
                    alert(JSON.stringify(err));
                }
            });
        }

        function openLoanListFrame() {
            api.sendEvent({
                name : 'ev_openLoanListFrame',
                extra : {
                    option : 0,
                }
            });
        }

        function openFirstFrame() {
            api.sendEvent({
                name : 'ev_openFirstFrame',
                extra : {
                    option : 0,
                }
            });
        }

        function openWinFrame(winName, options) {
            var delay = 0;
            if (api.systemType != 'ios') {
                delay = 300;
            }
            api.openWin({
                name : winName,
                url : './' + winName + '.html',
                bounces : false,
                delay : delay,
                slidBackEnabled : true,
                vScrollBarEnabled : false,
                animation : {
                    type : "movein", //动画类型（详见动画类型常量）
                    subType : "from_left", //动画子类型（详见动画子类型常量）
                    duration : delay //动画过渡时间，默认300毫秒
                },
                pageParam : options,
            });
        }

        function openLoanListFrameIndex(index) {
            api.sendEvent({
                name : 'ev_openLoanListFrame',
                extra : {
                    option : index,
                }
            });
            api.sendEvent({
                name : 'ev_fastoption',
                extra : {
                    option : index,
                }
            });
        }

        function openLoanManagementFrame() {
            //api.sendEvent({
            //	name : 'ev_openLoanManagementFrame',
            //});
            var userId = $api.getStorage('userID');
            if ( typeof (userId) == 'undefined') {
                openWinFrame('user_login_win', null);
                return;
            }
            var options = {
                index : 1,
            };
            openWinFrame('loan_manage_win', options);
        }

        function openLoanDetail(e) {
            var delay = 0;
            var options = {
                loanId : e.item_index,
            };
            openWinFrame('loan_detail_win', options);
        }

        function openCreditInquiry() {
            openWinFrame('credit_inquiry_win', null);
        }

        function openSlider(loanUrl) {
            var options = {
                url : loanUrl,
            };
            openWinFrame('loan_register_win', options);
        }

        apiready = function() {
            api.setRefreshHeaderInfo({
                visible : true,
                bgColor : '#ccc',
                textColor : '#fff',
                textDown : '下拉刷新...',
                textUp : '松开刷新...',
                showTime : true
            }, function(ret, err) {
                var list_container = document.querySelector('#list_container');
                var children = list_container.childNodes;
                var childnum = children.length;
                for (var j = 0; j < childnum; j++) {
                    list_container.removeChild(list_container.firstChild);
                }
                loadLoanList();
                api.refreshHeaderLoadDone();
            });
            var bannerLinkUrl = [];
            modelBannerPicsRecord.query({
                filter : {
                    "limit" : 10,
                    "order" : "index ASC",
                }
            }, function(ret, err) {
                if (err) {
                    //处理错误 err
                    alert(JSON.stringify(err));
                } else {
                    //处理数据 ret
                    //alert(JSON.stringify(ret));
                    if (ret.length) {
                        //alert(api.pageParam.loanId);
                        var picPath = [];
                        for (var i = 0; i < ret.length; i++) {
                            picPath.push(ret[i].fileUrl);
                            bannerLinkUrl.push(ret[i].bannerUrl);
                        }
                        var UIScrollPicture = api.require('UIScrollPicture');
                        UIScrollPicture.open({
                            rect : {
                                x : 0,
                                y : 0,
                                w : api.winWidth,
                                h : 110
                            },
                            data : {
                                paths : picPath
                            },
                            styles : {
                                indicator : {
                                    align : 'center',
                                    color : '#FFFFFF',
                                    activeColor : '#FFCC00'
                                }
                            },
                            placeholderImg : 'widget://res/default.jpg',
                            contentMode : 'scaleToFill',
                            interval : 15,
                            fixedOn : api.frameName,
                            loop : true,
                            fixed : false
                        }, function(ret2, err) {
                            if (ret2) {
                                //alert(JSON.stringify(ret));
                                if (ret2.eventType == 'click') {
                                    openSlider(bannerLinkUrl[ret2.index]);
                                }
                            } else {
                                alert(JSON.stringify(err));
                            }
                        });
                        //['widget://image/main_banner/a1.jpg', 'widget://image/main_banner/a2.jpg', 'widget://image/main_banner/a3.jpg', 'widget://image/main_banner/a4.jpg', 'widget://image/main_banner/a5.jpg', 'widget://image/main_banner/a6.jpg', 'widget://image/main_banner/a7.jpg'],
                    }
                }
            });
            loadLoanList();
        }
    </script>
</html>